<template>
    <div>
        <transition name="prompt">
            <div v-if="show" class="bj">
                <div class="prompt">
                    <div class="promptTop">
                        <img src="../../assets/img/horn.png" alt="">
                        <div class="title">公告</div>
                    </div>
                    <div class="promptContent">
                        <div class="promptTitle">最新公告</div>
                        <div class="promptMain">
                            <p v-for="(item, index) in texts" :key="index"><span>尊敬</span>{{ item }}</p>
                        </div>
                        <!-- <div class="author">
                            <div>项目负责人:胡立永</div>
                            <div>开发人员:龙洁利、贺志伟、周昕</div>
                        </div> -->
                    </div>
                    <div @click="close" class="promptBtn">我知道了</div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        props : {
            defaultShow : {
                type : Boolean,
                default : true
            },
            texts : {
                type : Array,
                default : () => ['尊敬的用户:此软件只供学习使用，禁止使用此软件谋取商业利益。如有以上情况，后果自负。']
            }
        },
        data() {
            return {
                show : this.defaultShow,
            }
        },
        methods: {
            close(){
                this.show = false;
            }
        },
    }
</script>

<style lang="less" scoped>
.bj{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  z-index: 100;
    .prompt{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 70%;
        height: 60%;
        background: white;
        box-shadow: 2px 1px 10px rgba(0,0,0,.5);
        transform: translate(-50%,-50%);
        z-index: 100;
        border-radius: 10px;
        overflow: hidden;
        .promptTop{
            position: relative;
            height: 50px;
            background: #31D731;
            img{
                position: absolute;
                left: 10px;
                top: 10px;
                width: 40px;
                height: 40px;
            }
            .title{
                width: 100%;
                height: 100%;
                text-align: center;
                font-size: 20px;
                color: white;
                line-height: 50px;
            }
        }
        .promptContent{
            padding:10px;
            color: rgb(120, 203, 252);
            height: calc(~'100% - 120px');
            .promptTitle{
                height: 30px;
                line-height: 30px;
                font-size: 16px;
            }
            .promptMain{
                padding: 10px 0;
                height: calc(~'100% - 84px');
                overflow-x: hidden;
                overflow-y: scroll;
                p{
                    padding: 5px 0;
                    span{
                        color: #fff;
                    }
                }
            }
            .author{
                width: calc(~"100% - 20px");
                padding: 4px 0;
                height: 40px;
                line-height: 16px;
                text-align: center;
            }
        }
        .promptBtn{
            position: absolute;
            bottom: 10px;
            width: 90%;
            left: 5%;
            height: 40px;
            background: #31D731;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color: white;
        }
    }
}

.prompt-enter-active,
.prompt-leave-active {
    transition: all .4s;
}
.prompt-leave-to {
    opacity: 0;
}
.prompt-enter {
    opacity: 1;
}
</style>